* {
    padding: 0;
    margin: 0;
}


body {
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    font-size: 14px;
    /* -apple-system：苹果默认字体不是苹果就用后面两个Helvetica Neue', sans-serif  */
    font-family: -apple-system, 'Helvetica Neue', sans-serif;
    color: #666;
    /* 1.5倍行高 */
    line-height: 1.5;
    height: 2000px;
}
a {
    /* 移动端链接点击高亮清除 */
     -webkit-tap-highlight-color: transparent;
    /* 禁止移动端长按图片弹出菜单栏 */
    -webkit-touch-callout: none;
    text-decoration: none;
    color: #666;
}
input {
    /* 清除移动端按钮、输入框默认样式，然后可以自定义更改 */
    -webkit-appearance: none;
}
img {
    /* 去除图片与图片之间的空白缝隙 最好用middle */
    vertical-align: middle;
   /* 禁止移动端长按图片弹出菜单栏 */
    -webkit-touch-callout: none;

}

.app {
    height: 45px;
    background-color: #333333;
    text-align: center;
    line-height: 45px;
    font-size: 14px;
    color: #fff;
}

/* ul {
    padding: 0;
    margin: 0;
} */
.app ul li {
    float: left;
    height: 45px;
    list-style: none;
}

.app ul li:nth-child(1) {
    width: 8%;
}

.app ul li:nth-child(1) img {
    width: 8px;
}

.app ul li:nth-child(2) {
    width: 10%;

}

.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}

.app ul li:nth-child(3) {
    width: 57%;
}

.app ul li:nth-child(4) {
    width: 25%;
    background-color: #f63515;
}
.search-wrap {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 44px;
    min-width: 320px;
    max-width: 640px;
    background-color:#212967;
    
}
.search-wrap .search-btn {
    position: absolute;
    top: 0;
    left: 0%;
    width: 40px;
    height: 44px;
    /* background-color: skyblue; */
}
.search-wrap .search-btn::before {
    position: absolute;
    top: 12px;
    left: 9px;
    display: block;
    width: 20px;
    height: 18px;
    content: "";
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;


}
.search {
    position: relative;
    height: 30px;
    /* background-color: red; */
    border-radius: 15px;
    margin:0 50px;
    /* .search是.search-wrap里的子元素，因为子元素.search添加外边距margin-top:7px.此时会发生外边距合并：嵌套块元素塌陷。此时给父元素添加 overflow-hidd 防止高度塌陷 也叫溢出隐藏 */
    margin-top: 7px;
    background-color:#fff;
    
}
.jd-icon {
    position: absolute;
    top: 8px;
    left: 13px;
    width: 20px;
    height: 15px;
    background: url(../images/jd.png) no-repeat;
    /* 移动端背景图需要缩放倍数切记 */
    background-size: 20px 15px;
}
.jd-icon::after {
    position: absolute;
    top: 0px;
    left: 26px;
    content: "";
    /* 伪元素选择器属于行内元素给宽高的话需要转换块级 切记 */
    display: block;
    width: 1px;
    height: 15px;
    /* 记住伪元素选择器 给颜色要给背景颜色 不然看不见 */
    background-color: #ccc;
    
    
}
/* 这所有盒子里给的都是背景图片 是因为需要定位 直接在结构里插入的图片无法定位 */
.search .sou {
    position: absolute;
    top: 8px;
    left: 48px;
    width: 15px;
    height: 15px;
    /* background-color: ; */
    /* 如果移动端布局涉及到精灵图背景图 则需先在fw软件里将精灵图等比例缩放（精灵图原图是397的宽缩放后取200整数宽）后再获取正确缩放后的坐位 */
    background: url(../images/jd-sprites.png) -84px 0px no-repeat;
    /* background-size也同样需要修改缩放后的宽度 因为精灵图原图是397缩放一半取200整数宽 高度auto就行 */
    background-size: 200px auto;

}
.search-wrap .search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    /* background-color: purple; */
    text-align: center;
    font-size: 14px;
    color: #fff;
}
.slider img {
    width: 100%;
}
.brand {
    /* 父盒子的圆角被图片压住了  */
    overflow:hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
   

}
.brand div {
    float: left;
    width: 33.33%;
    
   

}
.brand div img {
    width: 100%;
}

nav {
    padding-top: 5px;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    /* span行元素没有高度 想实现父的text-align=center 需要转换 */
    display: block;
}
.navs a {
    float: left;
    /* cs盒子模型 不会撑大盒子 因为下面的最后两个a另外加了一条左边框 */
    box-sizing: border-box;
}

.navs a:nth-child(1) {
       width: 50%;
}
.navs a:nth-child(n+2) {
    width: 25%;
    border-left: 1px solid #ccc;
}
.navs img {
    width: 100%;
}